<template>
    <div>
       <van-nav-bar
        title="用户注册"
        left-text="返回"
        left-arrow
        @click-left="goBack"
        />
 
        <div class="register-panel">
        <van-field
            v-model="username"
            label="用户名"
            icon="clear"
            placeholder="请输入用户名"
            required
            @click-icon="username = ''"
            :error-message='nameMessage'
        />
 
        <van-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            required
            :error-message='passwordMessage'
        />
        <div class="register-button">
            <van-button type="primary" size="large" @click="reigesiterActions" :loading="openLoading">马上注册</van-button>
        </div>
       </div>
 
    </div>
</template>
 
<script>
import axios from "axios";
import url from "@/serviceAPI.config.js";
import { Toast } from 'vant'
export default {
  data() {
    return {
      username: "",
      password: "",
      nameMessage:'',
      passwordMessage:'',
      openLoading:false//是否开启加载
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    checkregister(){
      let isOK = true;
      if(this.username.length<3){
          this.nameMessage = '用户名必须大于3';
          isOK = false;
      }else{
        this.nameMessage = '';
      }
      if(this.password < 3){
        this.passwordMessage = '密码必须大于3';
        isOK = false;
      }else{
        this.passwordMessage = '';
      }
      return isOK;
    },
    reigesiterActions(){
      this.checkregister() && this.axiosRegisterUser();
    },
    //*********axios注册用户方法********
    axiosRegisterUser() {
      this.openLoading = true;
      axios({
        url: '/Apl/user/register',
        method: "post",
        data: {
          userName: this.username,
          password: this.password
        }
      })
        .then(response => {
          if(response.data.code == 200){
            Toast.success('注册成功')
            this.$router.push('/')
          }else{
              Toast.fail('注册失败')
              this.openLoading = false;
          }
        })
        .catch(error => {
          Toast.fail('注册失败')
          this.openLoading = false;
        });
    }
  }
};
</script>
 
<style scoped>
.register-panel {
  width: 96%;
  border-radius: 5px;
  margin: 20px auto;
  padding-bottom: 50px;
}
.register-button {
  padding-top: 10px;
}
</style>